import React from "react";

// 首先jsx是javascript+xml组合的，一个组件中，他的视图模板就是jsx,类似template
// function DemoA() {
//     return (
//         // <div>这是函数组件</div>这就是一个jsx,像这些直接写的就是一个语法糖，他的的底层是通过react的api来实现的
//         <div>这是函数组件</div>
//     )
// }

// 记住在react中整个jsx就是一个对象，他的书写位置相对自由，就是说，由于这个模板是一个对象，在其他地方定义好，然后拿过来使用，也是可以的
// let box = <div>这是组件</div>
// function DemoA() {
//     return (
//         box
//     )
// }

// 在实际的开发中，jsx的写法就是直接写更直接，但是这种写法浏览器是无法识别的，
// 这是借助了babel进行加载翻译才能识别使用的，用的是react.createElemrnt 这个方法来翻译
// jsx其实就是这个方法的语法糖,在这个方法中可以一一对照
// 如下所示,就是jsx和api方法的对比
// let box = <div>
//     <h1>
//         hello react
//     </h1>
// </div>

// 对比起来就是React.createElement中有三个参数,前提jsx有一个根标签,所有的标签都需要写在一个标签内
// 首先,第一个参数是最外面的标签以字符串的方式,第二个参数是这个标签上的属性以对象的方式,第三个是数组,是这个标签上的内容
// 当内容也是一个标签时,那么就继续按照这种方式写下去
// function DemoA() {
//     return React.createElement(
//         'div',
//         {},
//         [React.createElement('h1', { key: 1 }, ['hello react'])]
//     )
// }


// 练习  注意jsx要用()包裹起来 jsx中的类名是classname
// let box = (
//     <div className="box" title="haha">
//         <span>我是span</span>
//         <a href="http://ml.com"></a>
//     </div>
// )
// let view = React.createElement(
//     'div',
//     { className: 'box', title: 'haha' },
//     [
//         React.createElement('span', { key: 1 }, ['我是span']),
//         React.createElement('a', { key: 2, href: "http://ml.com" }, ['ml'])
//     ]
// )
// function DemoA() {
//     return React.createElement(
//         'div',
//         { className: 'box', title: 'haha' },
//         [
//             React.createElement('span', { key: 1 }, ['我是span']),
//             React.createElement('a', { key: 2, href: "http://ml.com" }, ['ml'])
//         ]
//     )
// }
// console.log(view);//craeteElement的返回值是一个对象 jsx的底层原理是一样的,所以他们的返回值是相同的
//而且需要注意的是返回的jsx对象是不可更改的,他就是用来给浏览器用来渲染的,所以不能改变 
// 在jsx中,表达式使用{}来使用的,注意{}中是要有一个值的,不管里面写的是啥,最后递给{}处理的都是一个数据,时对象还是什么乱起八糟的

// 三个变化的属性 class变为classname  for变为htmlfor  tabindex变为tabIndex
// 三个新增的属性 key用于列表渲染,可以加快渲染效率,ref用于拿到dom元素,dangerouslySetInnerHTML用来渲染一片html字符串
// dangerouslySetInnerHTML简单来说就是可以将字符串的标签可以正常使用

// let aa = "<div><h1>标签</h1></div>"
// function DemoA() {
//     return (
//         <div>
//             {aa}
//             <hr />
//             {/* 固定写法 */}
//             <div dangerouslySetInnerHTML={{ __html: aa }}></div>
//         </div>
//     )
// }

// function DemoA() {
//     return (
//         // 在这的jsx模板最外围一定要有一个标签,但是标签可以简写为<></>
//         //而且在jsx中,所有的标签都可以写成单标签

//         // 注意react写行内样式,就必须以对象的形式书写,而且如果是js代码的话,外面就得套一个{}
//         <>
//             <div style={{ color: "red" }}>组件</div>
//         </>
//     )
// }


// 另外  jsx是支持打点使用的,意思就是在jsx代码的书写过程中,使用打点一样可以获取标签
// 如下

// 注意,使用这些打点的时候,最好是大写
let Ml = {
    Button() {
        return (
            <button>点我</button>
        )
    },
    Form() {
        return (
            <div>form</div>
        )
    }
}
// function DemoA() {
//     return (
//         // 在react中,一定要有一个根标签,但是正常的标签会有样式
//         // react有一个方法来解决这种样式  React.Fragment在浏览器上就不会出现这种情况
//         // 当然Button和Form是可以解构出来的
//         <React.Fragment>
//             <Ml.Button></Ml.Button>
//             <Ml.Form></Ml.Form>
//         </React.Fragment>
//     )
// }
function DemoA() {
    let { Button, Form } = Ml
    return (
        <React.Fragment>
            <Button></Button>
            <Form></Form>
        </React.Fragment>
    )
}

// props在react中就是自定义属性,只能使用不能修改
// 可以传递多种数据,很多种
// function Child(props) {
//     let { name, ...other } = props
//     // 其他的数据使用other接收
//     console.log(other);
//     return (
//         <div>{name}{other.age}</div>
//     )
// }
// function DemoA() {
//     let data = {
//         name: 'wc',
//         age: 18
//     }
//     return (
//         <Child {...data}></Child>
//     )
// }
// 另外就是插槽的用法,如果是写在这个子标签的中间的内容,那么子标签可以通过props.children来接收这些数据
// 就是相当于插槽嘛  注意点,jsx中{} 很多都是用来装数据的

// 在使用jsx时,如果{装载的内容}是一个数组,那么就会对部分数据直接渲染出来,比如jsx,数字,字符串等等


export default DemoA;